import { compelrToFunction } from "./compile/index";
import { initState } from "./initState";
import { callHook, mounteComponent } from "./lifecycle";
import { mergeOptions } from "./utils/index";

export function initMixin(Vue) {
  Vue.prototype._init = function (options) {
    let vm = this; //Vue的实列
    vm.$options = mergeOptions(this.constructor.options, options); // 合并 Vue.options:全局的方法, options:new vue 用户自己的方法
    callHook(vm, "beforeCreate");
    //初始化状态
    initState(vm);
    callHook(vm, "created");
    //渲染模板
    if (vm.$options.el) {
      vm.$mount(vm.$options.el);
    }
  };

  //创建$mount
  Vue.prototype.$mount = function (el) {
    //el template render
    let vm = this;
    el = document.querySelector(el);
    vm.$el = el;
    let options = vm.$options;
    //先看有没有render 在看template 都没有在拿el
    if (!options.render) {
      let template = options.template;
      console.log(template);
      if (!template && el) {
        //没有template就获取el
        template = el.outerHTML; //<div id="app">hello vue</div>
      }
      //1.变成ast语法树->render()函数
      let render = compelrToFunction(template);
      console.log(render);
      //2.将render函数变成虚拟dom vnode
      options.render = render;
    }
    //挂载组件
    mounteComponent(vm, el);
  };
}
//ast 语法树{} js css都能操作   vnode:{} 只能操作节点
